<template>
	<view class="inspection-report">
		<view class="report-content">
			<image class="success"
							src="https://image.chushouya.com/assets/images/inspection/img_finsih.png"
							mode="aspectFill" />
			<view class="product"><text
					class="type">{{qualityProduct.categoryName}}</text>{{inspectionDetail.productName}}</view>
			<view class="date">质检日期：{{inspectionDetail.qualityTime}}</view>
			<view class="inspector d-flex justify-content-start align-items-center">
				<image class="inspector-avatar" :src="qualityUser.avatar"
					mode="aspectFill" />
				<view class="inspector-info">
					<view class="name">{{qualityUser.qualityName}}<text class="tag">{{qualityUser.qualityTag}}</text>
					</view>
					<view class="experience">{{qualityUser.description}}</view>
				</view>
			</view>
			<view class="equipment-title d-flex justify-content-between align-items-center"><text>设备属性</text>
				<view class="control"></view>
			</view>
			<view class="equipment-attribute">
				<view class="product"><text
						class="type">{{qualityProduct.categoryName}}</text>{{qualityProduct.productName}}<text
						class="tag">型号吻合</text></view>
				<view class="attributes-list d-flex justify-content-between align-items-center">
					<view class="attribute d-flex flex-column justify-content-center align-items-center"
						v-for="(item, index) in attributesList" :key="index">
						<view class="label">{{ item.qualityValue || item.userValue }}</view>
						<view class="value">{{ item.label }}</view>
					</view>
				</view>
			</view>
			<view class="equipment-title d-flex justify-content-between align-items-center"><text>基本情况</text>
				<view class="control d-flex justify-content-end align-items-center">
					<view class="item" v-if="basicInfoAbnormal!=0">
						<image class="expand"
							src="https://image.chushouya.com/assets/images/inspection/icon_yichang.png"
							mode="aspectFill" />
						<text>{{basicInfoAbnormal}}项异常</text>
					</view>
					<view class="item" v-if="basicInfoList.length-basicInfoAbnormal!=0">
						<image class="expand" src="https://image.chushouya.com/assets/images/inspection/icon_gou.png"
							mode="aspectFill" />
						<text>{{basicInfoList.length-basicInfoAbnormal}}项完好</text>
					</view>
					<image class="expand" src="https://image.chushouya.com/assets/images/inspection/icon_shouqi.png"
						mode="aspectFill" :style="{
              transform: showBasicInfo ? 'rotate(0deg)' : 'rotate(180deg)',
            }" @click="showBasicInfo = !showBasicInfo" />
				</view>
			</view>
			<view class="basic-info" v-show="showBasicInfo">
				<view v-for="(item, index) in basicInfoList" :key="index"
					class="tips d-flex justify-content-between align-items-center">
					<text class="label">{{item.label}}</text>
					<text class="value" :class="item.qualityValue==item.userValue?'':'highlight'">{{item.qualityValue || item.userValue}}</text>
				</view>
			</view>
			<view class="equipment-title d-flex justify-content-between align-items-center"><text>外观成色</text>
				<view class="control d-flex justify-content-end align-items-center">
					<view class="item" v-if="appearanceColorAbnormal!=0">
						<image class="expand"
							src="https://image.chushouya.com/assets/images/inspection/icon_yichang.png"
							mode="aspectFill" />
						<text>{{appearanceColorAbnormal}}项异常</text>
					</view>
					<view class="item" v-if="appearanceColorList.length-appearanceColorAbnormal!=0">
						<image class="expand" src="https://image.chushouya.com/assets/images/inspection/icon_gou.png"
							mode="aspectFill" />
						<text>{{appearanceColorList.length-appearanceColorAbnormal}}项完好</text>
					</view>
					<image class="expand" src="https://image.chushouya.com/assets/images/inspection/icon_shouqi.png"
						mode="aspectFill" :style="{
              transform: showAppearanceColor ? 'rotate(0deg)' : 'rotate(180deg)',
            }" @click="showAppearanceColor = !showAppearanceColor" />
				</view>
			</view>
			<view class="appearance-color" v-show="showAppearanceColor">
				<view v-for="(item, index) in appearanceColorList" :key="index"
					class="tips d-flex justify-content-between align-items-center">
					<text class="label">{{item.label}}</text>
					<text class="value"
						:class="item.qualityValue==item.userValue?'':'highlight'">{{item.qualityValue || item.userValue}}</text>
				</view>
			</view>
			<view class="equipment-title d-flex justify-content-between align-items-center"><text>功能障碍</text>
				<view class="control d-flex justify-content-end align-items-center">
					<view class="item" v-if="dysfunctionAbnormal!=0">
						<image class="expand"
							src="https://image.chushouya.com/assets/images/inspection/icon_yichang.png"
							mode="aspectFill" />
						<text>{{dysfunctionAbnormal}}项异常</text>
					</view>
					<view class="item" v-if="dysfunctionList.length-dysfunctionAbnormal!=0">
						<image class="expand" src="https://image.chushouya.com/assets/images/inspection/icon_gou.png"
							mode="aspectFill" />
						<text>{{dysfunctionList.length-dysfunctionAbnormal}}项完好</text>
					</view>
					<image class="expand" src="https://image.chushouya.com/assets/images/inspection/icon_shouqi.png"
						mode="aspectFill" :style="{
              transform: showDysfunction ? 'rotate(0deg)' : 'rotate(180deg)',
            }" @click="showDysfunction = !showDysfunction" />
				</view>
			</view>
			<view class="dysfunction" v-show="showDysfunction">
				<view v-for="(item, index) in dysfunctionList" :key="index"
					class="tips d-flex justify-content-between align-items-center">
					<text class="label">{{item.label}}</text>
					<text class="value" :class="item.qualityValue==item.userValue?'':'highlight'">{{item.qualityValue || item.userValue}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInspectionDetail
	} from "@/api";
	export default {
		data() {
			return {
				attributesList: [{
						label: "机身颜色",
						qualityValue: "",
						userValue: ""
					},
					{
						label: "网络制式",
						qualityValue: "",
						userValue: ""
					},
					{
						label: "购买渠道",
						qualityValue: "",
						userValue: ""
					},
					{
						label: "机身内存",
						qualityValue: "",
						userValue: ""
					}
				],
				inspectionDetail: {},
				showBasicInfo: true,
				showAppearanceColor: true,
				showDysfunction: true,
				qualityProduct: {},
				qualityUser: {},
				orderQualityItem: [],
				basicInfoList: [{
					label: "使用情况",
					qualityValue: "",
					userValue: ""
				}],
				appearanceColorList: [{
					label: "屏幕外观",
					qualityValue: "",
					userValue: ""
				}],
				dysfunctionList: [{
					label: "屏幕显示",
					qualityValue: "",
					userValue: ""
				}],
				basicInfoAbnormal: 0,
				appearanceColorAbnormal: 0,
				dysfunctionAbnormal: 0
			};
		},
		methods: {
			loadQualityDetail() {
				getInspectionDetail({
					orderNo: this.orderNo
				}).then(async ({
					data,
					code
				}) => {
					if (code === 200) {
						this.inspectionDetail = data || {};
						this.qualityProduct = this.inspectionDetail.qualityProduct;
						this.qualityUser = this.inspectionDetail.qualityUser;
						this.orderQualityItem = this.inspectionDetail.orderQualityItem;
						this.attributesList = await this.findCorrespondingItem(this.attributesList);
						this.basicInfoList = await this.findCorrespondingItem(this.basicInfoList);
						this.appearanceColorList = await this.findCorrespondingItem(this.appearanceColorList);
						this.dysfunctionList = await this.findCorrespondingItem(this.dysfunctionList);
						this.basicInfoAbnormal = this.countEqualPairs(this.basicInfoList);
						this.appearanceColorAbnormal = this.countEqualPairs(this.appearanceColorList);
						this.dysfunctionAbnormal = this.countEqualPairs(this.dysfunctionList);
					}
				});
			},
			findCorrespondingItem(list) {
				return list = list.map((val) => {
					const qualityIndex = this.orderQualityItem.findIndex((item) => {
						return val.label == item.attrName
					})
					return {
						label: val.label,
						qualityValue: this.orderQualityItem[qualityIndex]?.qualityValues[0]?.valueContent,
						userValue: this.orderQualityItem[qualityIndex]?.userValues[0]?.valueContent
					}
				})
			},
			countEqualPairs(arr) {
				return arr.reduce((acc, obj) => acc + (obj.qualityValue != obj.userValue ? 1 : 0), 0);
			}
		},
		onLoad(options) {
			if (options.orderNo || options.id) {
				this.orderNo = options.orderNo || options.id
				this.loadQualityDetail()
			}
		}
	};
</script>

<style scoped lang="scss">
	.inspection-report {
		background: #f6f7f9 url("https://image.chushouya.com/assets/images/inspection/img_bg.png") no-repeat top;
		background-size: 100% 680rpx;
		padding: 236rpx 32rpx 32rpx;

		.type {
			margin-right: 10rpx;
		}

		.report-content {
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 32rpx 32rpx 40rpx;
			position: relative;
			.success {
				width: 148rpx;
				height: 148rpx;
				position: absolute;
				right: 28rpx;
				top: 12rpx;
				z-index: 1;
			}
			.product {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 10rpx;
				max-width: 80%;
			}

			.date {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				margin-bottom: 32rpx;
			}

			.inspector {
				margin-bottom: 48rpx;

				.inspector-avatar {
					width: 88rpx;
					height: 88rpx;
					margin-right: 20rpx;
				}

				.inspector-info {
					.name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 4rpx;

						.tag {
							width: 126rpx;
							text-align: center;
							height: 36rpx;
							line-height: 36rpx;
							background: linear-gradient(270deg, #ffb56b 0%, #ffeddb 100%);
							border-radius: 6rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #743a00;
							margin-left: 12rpx;
							padding: 0 8rpx;
						}
					}

					.experience {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
					}
				}
			}

			.equipment-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				height: 82rpx;
				width: 100%;
				line-height: 82rpx;
				padding: 0 20rpx;
				background: #f7f8fa;
				border-radius: 10rpx;
				margin-bottom: 32rpx;
				margin-top: 48rpx;

				.item {
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
						vertical-align: middle;
						margin-left: 24rpx;
					}

					text {
						vertical-align: middle;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
					}
				}

				.expand {
					margin-left: 16rpx;
					width: 32rpx;
					height: 32rpx;
					transition: all 0.3s;
				}
			}

			.equipment-attribute {
				.product {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 26rpx;

					.tag {
						width: 104rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 6rpx;
						border: 1rpx solid #ffbb00;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #ffbb00;
						margin-left: 8rpx;
						padding: 0 8rpx;
					}
				}

				.attributes-list {
					margin-bottom: 48rpx;

					.attribute {
						.label {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 4rpx;
						}

						.value {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}

			.basic-info,
			.appearance-color,
			.dysfunction {
				transition: all 0.3s;

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					width: 120rpx;
				}

				.value {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					width: calc(100% - 120rpx);
					text-align: right;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.highlight {
					color: #ffa646;
				}

				.tips {
					margin-bottom: 32rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>